<template>
    <div id="FM">
      <!-- 财务管理 -->
      <el-form :inline="true" :model="older" class="demo-form-inline">
        <!-- 姓名 -->
        <el-form-item label="老人姓名">
          <el-input v-model="older.name" placeholder="请输入咨询人姓名" clearable style="width: 149px; height: 40px" />
        </el-form-item>
  
        <!-- 入住号 -->
        <el-form-item label="入住号">
          <el-input v-model="older.Rid" placeholder="请输入入住号" clearable style="width: 164px; height: 40px" />
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="onSubmit" color="rgba(86, 118, 247, 1)"
            style="width: 87px; height: 38px">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 87px; height: 38px">执行单打印</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 第二行 -->
      <el-form :inline="true" :model="older" class="demo-form-inline">
        <el-form-item label="类型管理" class="BTN">
          <el-select v-model="older.region" placeholder="机构入住" clearable>
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
  
  
        </el-form-item>
      </el-form>
  
      <div class="selection">
        <el-form :inline="true" :model="sel" class="demo-form-inline">
          <el-form-item label="楼号">
            <el-select v-model="sel.buildingRef" placeholder="楼号" clearable>
              <el-option label="一号楼" value="一号楼" default />
              <el-option label="二号楼" value="二号楼" />
            </el-select>
          </el-form-item>
          <br />
          <el-form-item label="楼层">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="一楼" name="first">
                <span>房间:14个</span>
                <span>床位:19个</span>
                <span>共入住:15人</span>
                <span>0级照护:0人</span>
                <span>一级照护:2人</span>
                <span>二级照护:2人</span>
                <span>三级照护:2人</span>
                <span>四级照护:2人</span>
              </el-tab-pane>
              <el-tab-pane label="二楼" name="second">
                <span>房间:14个</span>
                <span>床位:19个</span>
                <span>共入住:15人</span>
                <span>0级照护:0人</span>
                <span>一级照护:3人</span>
                <span>二级照护:3人</span>
                <span>三级照护:3人</span>
                <span>四级照护:3人</span>
              </el-tab-pane>
              <el-tab-pane label="三楼" name="third">
                <span>房间:14个</span>
                <span>床位:19个</span>
                <span>共入住:15人</span>
                <span>0级照护:0人</span>
                <span>一级照护:4人</span>
                <span>二级照护:4人</span>
                <span>三级照护:4人</span>
                <span>四级照护:4人</span>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <br />
          <el-form-item>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="空闲" value="空闲" />
              <el-checkbox label="已入住" value="已入住" />
              <el-checkbox label="请假外出" value="请假外出" />
              <el-checkbox label="外出就医" value="外出就医" />
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
  
    <!-- 信息卡片 -->
    <div>
      <el-card style="max-width: 100%" body-style="padding: 0">
        <div style="display: flex">
          <div class="left">
            <div style="position: absolute; top: 18px; left: 10px; height: 24px">
              <el-icon color="white" size="24px">
                <School />
              </el-icon>
              <span style="color: white; font-size: 14px; line-height: 24px">入院</span>
            </div>
            <div style="position: absolute; top: 40px; right: 80px">
              <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </div>
            <div style="display: flex; color: white; position: relative">
              <div style="position: absolute; top: 130px; left: 30px">
                金花婆婆
              </div>
              <div style="position: absolute; top: 130px; left: 108px">女</div>
              <div style="position: absolute; top: 130px; left: 140px">73岁</div>
            </div>
          </div>
          <div class="right">
            <!-- 顶部信息 -->
            <div class="topInfo">
              <span>今日体温</span>
              <span style="color: rgba(86, 118, 247, 1); margin-left: 10px">35.3</span>
              <span style="margin-left: 156px">入住号:</span>
              <span class="text">7267627673</span>
              <span style="margin-left: 20px">照护等级:</span>
              <span class="text">三级照护</span>
              <span style="margin-left: 20px">床位号:</span>
              <span class="text">5栋9楼02室 22床</span>
            </div>
  
            <!-- 底部信息 -->
            <div style="position: relative">
              <div class="leftInfo">
                <div style="">
                  <div style="margin-bottom: 20px">医疗储备金:5142元</div>
                  <div>
                    养老储备金:
                    <span style="color: red">453元</span>
                  </div>
                </div>
  
                <div style="
                    font-size: 14px;
                    text-align: end;
                    margin-left: 110px;
                    margin-right: 10px;
                  ">
                  <div style="color: rgba(154, 154, 154, 1)">10月账单已生成</div>
                  <div style="color: red; margin-top: 10px">6月账单未结算</div>
                </div>
              </div>
              <div class="rightInfo">
                <el-button @click="router.push('/nursing_management/doctor_advice')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">医嘱</el-button>
                <el-button style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  " @click="router.push('/nursing_management/nursing_documents')">护理文书</el-button>
                <el-button @click="router.push('/deduction')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">评估记录</el-button>
                <el-button @click="router.push('/notice')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">通知书</el-button>
                <el-button @click="router.push('/billdetails')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">账单</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  
    <!-- 信息卡片 -->
    <div>
      <el-card style="max-width: 100%" body-style="padding: 0">
        <div style="display: flex">
          <div class="left">
            <div style="position: absolute; top: 18px; left: 10px; height: 24px">
              <el-icon color="white" size="24px">
                <School />
              </el-icon>
              <span style="color: white; font-size: 14px; line-height: 24px">入院</span>
            </div>
            <div style="position: absolute; top: 40px; right: 80px">
              <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </div>
            <div style="display: flex; color: white; position: relative">
              <div style="position: absolute; top: 130px; left: 30px">
                金花婆婆
              </div>
              <div style="position: absolute; top: 130px; left: 108px">女</div>
              <div style="position: absolute; top: 130px; left: 140px">73岁</div>
            </div>
          </div>
          <div class="right">
            <!-- 顶部信息 -->
            <div class="topInfo">
              <span>今日体温</span>
              <span style="color: rgba(86, 118, 247, 1); margin-left: 10px">35.3</span>
              <span style="margin-left: 156px">入住号:</span>
              <span class="text">7267627673</span>
              <span style="margin-left: 20px">照护等级:</span>
              <span class="text">三级照护</span>
              <span style="margin-left: 20px">床位号:</span>
              <span class="text">5栋9楼02室 22床</span>
            </div>
  
            <!-- 底部信息 -->
            <div style="position: relative">
              <div class="leftInfo">
                <div style="">
                  <div style="margin-bottom: 20px">医疗储备金:5142元</div>
                  <div>
                    养老储备金:
                    <span style="color: red">453元</span>
                  </div>
                </div>
  
                <div style="
                    font-size: 14px;
                    text-align: end;
                    margin-left: 110px;
                    margin-right: 10px;
                  ">
                  <div style="color: rgba(154, 154, 154, 1)">10月账单已生成</div>
                  <div style="color: red; margin-top: 10px">6月账单未结算</div>
                </div>
              </div>
              <div class="rightInfo">
                <el-button @click="onSubmit" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">充值/退费</el-button>
                <el-button @click="router.push('/settlementlist')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">结算</el-button>
                <el-button @click="router.push('/deduction')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">扣费</el-button>
                <el-button @click="router.push('/billdetails')" style="
                    width: 87px;
                    height: 41px;
                    color: #5676f7;
                    border: 1px solid #5676f7;
                    font-size: 14px;
                  ">账单明细</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  
  <script setup>
  import { reactive } from "vue";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import axios from "axios";
  
  const activeName = ref("first");
  
  const router = useRouter();
  
  const checkList = ref(["空闲", "已入住", "请假外出", "外出就医"]);
  
  const handleClick = (tab, event) => {
    console.log(tab, event);
  };
  
  const older = reactive({
    name: "",
    Rid: "",
    region: "",
  });
  
  const sel = reactive({
    buildingRef: "一号楼",
    floor: "",
    region: "",
  });
  
  
  
  const onSubmit = () => {
    console.log("submit!");
  };
  </script>
  
  
  <style scoped>
  #FM {
    width: 85vw;
  }
  
  .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  
  .el-button {
    border-radius: 15px;
  }
  
  .el-form-item .el-form-item__label {
    font-size: 16px;
  }
  
  .BTN {
    position: relative;
    width: 95%;
  }
  
  .btn {
    position: absolute;
    right: 0px;
  }
  
  .selection {
    /* border: 1px solid #000000; */
    /* border-radius: 15px; */
    width: 100%-200px;
    /* width: 100vw-200px; */
    min-height: 167px;
    background-color: rgba(232, 232, 232, 1);
    padding: 20px;
    box-sizing: border-box;
  }
  
  .demo-tabs span {
    margin-right: 40px;
    font-weight: bold;
    font-size: 14px;
  }
  
  .el-checkbox-group {
    margin-left: 45px;
  }
  
  .left {
    width: 220px;
    height: 180px;
    background-color: #5676f7;
    position: relative;
    /* border: 1px solid #000000; */
  }
  
  .topInfo {
    widows: 100%-220px;
    margin-left: 12px;
    margin-top: 18px;
    /* border: 1px solid #000000; */
  }
  
  .topInfo span {
    color: rgba(154, 154, 154, 1);
    font-size: 14px;
  }
  
  .topInfo .text {
    color: black;
    font-weight: bold;
    margin-left: 4px;
  }
  
  .leftInfo {
    width: 400px;
    height: 83px;
    position: absolute;
    left: 75px;
    top: 30px;
    /* border: 1px solid #000000; */
    border-right: 1px solid rgba(154, 154, 154, 1);
    font-size: 20px;
    display: flex;
  }
  
  .rightInfo {
    width: 600px;
    height: 83px;
    position: absolute;
    /* border: 1px solid #000000; */
    top: 30px;
    left: 480px;
    margin-top: 15px;
    margin-left: 20px;
  }
  </style>